<template>
  <div id="tableScroll" class="table_scroll flex_grow_1 flex_shrink_1" v-if="show">
    <el-table
      :data="data"
      :max-height="data.length ? maxHeight : maxHeight + bottom"
      v-bind="options"
      v-on="events"
      tooltip-effect="light"
      border
    >
      <slot />
    </el-table>
    <slot name="pagination" />
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector';

export default {
  name: 'TableScroll',
  props: {
    bottom: {
      type: [Number, String],
      default: 72
    },
    data: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {}
    },
    events: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      const erd = elementResizeDetectorMaker(), container = document.getElementById('tableScroll');
      if (container) {
        erd.listenTo(container, el => {
          if (this.maxHeight != el.offsetHeight - Number(this.bottom)) {
            this.maxHeight = el.offsetHeight - Number(this.bottom);
          }
        });
      }
    });
  },
  data() {
    return {
      maxHeight: 0
    };
  }
};
</script>

<style lang="scss" scoped>
.table_scroll {
  overflow: hidden;
}
</style>
